import { View, Text, Image, Button, Swiper, SwiperItem, ScrollView, WebView } from "@tarojs/components";
import Taro, { useDidHide, useDidShow, useLoad, usePullDownRefresh } from "@tarojs/taro";
import { ArrowLeft } from '@nutui/icons-react-taro'
import React, { useEffect, useState } from 'react'
import { NavBar } from "@nutui/nutui-react-taro";
import useNavInfo from "../../../hooks/useNavInfo";
import "./index.scss";
import { iconClockBlack, iconZonghe, questType01, questType02, questType03, questType04, questType05, questType06, zxcs } from "../../assets/files";
import { navigateTo } from "../../../common/_";
import { selectQuestionTypes, startExam } from "../../../api/ceshi";

export default function TestType() {

  const { statusBarHeight,screenHeight } = useNavInfo();
  const [iconList] = useState([questType01,questType02,questType03,questType04,questType05,questType06,questType06,questType06,questType06,questType06,questType06,questType06])

  function _handleback() {
    Taro.navigateBack({
      delta: 1
    })
  }

  useEffect(()=>{
    getType()
  },[])

  const [typeList,setTypeList] = useState([])
  const [zonghe,setZonghe] = useState([])
  const getType = async() =>{
    const {data,success} =  await selectQuestionTypes({})


    data.forEach((v,i)=>{
      if(v.id == 1){
        setZonghe(v)
        data.splice(i,1)
      }
    })
    setTypeList(data)
  }

  const itemClick = async(item) =>{
    navigateTo('/packageA/pages/test/index',item)
      // const { success,msg } = await startExam({questionBankTypeid:item.id})
      // if(success){
      //   navigateTo('/packageA/pages/test/index',item)
      // }else{
      //   Taro.showToast({
      //     title:msg,
      //     icon:'none'
      //   })
      // }
  }

  

  const toTest = () =>{
    navigateTo('/packageA/pages/test/index',zonghe)
  }
  
  return (
    <View className="index">
      <NavBar
        fixed
        style={{ backgroundColor: "transparent", position: 'fixed', left: 0, top: statusBarHeight }}
        back={
          <>
            <ArrowLeft color="#ffffff" />
          </>
        }
        onBackClick={(e) => _handleback()}
      >
        <span style={{ color: '#FFFFFF' }}>我要测试</span>
      </NavBar>
      <View className="homebg" style={{height: screenHeight,}}></View>

      <View className="mainWrap" style={{ paddingTop: statusBarHeight + 88 }}>
        <View className="marg" onClick={()=>toTest()}>
          <Image src={iconZonghe} className="ide" />
          <Text>{zonghe.questionTypeName}</Text>
        </View>
        <View className="zxcsWrap">
          <Image src={zxcs} className="zxcsSty" />
        </View>

        <View className="typeWrap">
          {
            typeList.map((v, i) => {
              return (
                <View className="titWrap" style={{ backgroundColor: '#fff' }} onClick={()=>itemClick(v)}>
                  <Image className="imgSty" src={iconList[i]} />
                  <Text className="yyTit">{v.questionTypeName}</Text>
                </View>
              )
            })
          }

        </View>
      </View>
    </View>
  );
}
